<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>版心与布局流程</title>

    <style>

        /*上下结构*/
        .top,
        .banner,
        .main,
        .footer {
            width: 900px;
            background-color: #EEE;
            border: 1px dashed #CCC;
            margin: 0 auto;
        }

        .top {
            height: 80px;
        }

        .banner {
            margin: 10px auto;
            height: 100px;
            width: 900px;
        }

        .main {
            height: 400px;
        }

        .footer {
            margin: 10px auto 0;
            height: 60px;
        }

        /*左右结构*/
        .lr-top {
            width: 900px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
        }

        .lr-main {
            width: 900px;
            height: 500px;
            background-color: blue;
            margin: 0 auto;
        }

        .lr-left {
            width: 280px;
            height: 500px;
            background-color: #00FF00;
            float: left;
        }

        .lr-right {
            width: 600px;
            height: 500px;
            background-color: #ea29ff;
            float: right;
        }

        .lr-footer {
            width: 900px;
            height: 200px;
            background-color: yellow;
            margin: 0 auto;
        }

        /*通栏*/
        .full-top {
            height: 100px;
            background-color: #EEEEEE;
        }

        .full-top-inner {
            height: 100px;
            width: 900px;
            margin: 0 auto;
            background-color: #00FF00;
        }

        .full-banner {
            width: 900px;
            height: 200px;
            margin: 0 auto;
            background-color: #EEEEEE;
        }

        .full-banner li {
            float: left;
            height: 200px;
            width: 217px;
            list-style: none;
            margin-right: 10px;
        }

        .full-banner .one {
            background-color: #ffff00;
        }

        .full-banner .two {
            background-color: #87ff86;
        }

        .full-banner .three {
            background-color: #ff3b69;
        }

        /*为li设置margin-right但是最后一个不需要根据层叠性设置0覆盖，但是此处不能写.four因为优先级不足以覆盖上面  .full-banner li*/
        .full-banner .four {
            float: right;
            background-color: #311aff;
            /*可能由于计算不准确导致右边有1px缝隙，可以让其有浮动让margin大点优化*/
            margin-right: 0;
        }

        .full-footer {
            height: 50px;
            background-color: #EEE;
        }

        .full-footer .full-footer-inner {
            height: 50px;
            width: 900px;
            background-color: #ea29ff;
            margin: 0 auto;
        }

    </style>
</head>
<body>
<p>版心：页面核心部分即可视化部分</p>
<hr>
<p>通栏写法：通常top、footer为了美观需要通栏，但是top、footer内容部分还是需要和版心宽度一样，此时可以使用通栏div包裹版心div</p>
<div class="full-top">
    <div class="full-top-inner"></div>
</div>
<div class="full-banner">
    <li class="one"></li>
    <li class="two"></li>
    <li class="three"></li>
    <li class="four"></li>
</div>
<div class="full-footer">
    <div class="full-footer-inner"></div>
</div>

<p>布局样式:左右型布局</p>
<div class="lr-top"></div>
<div class="lr-main">
    <div class="lr-left">left</div>
    <div class="lr-right">right</div>
</div>
<div class="lr-footer">footer</div>

<p>布局样式:上下流式</p>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>